<!--
- Author:   .
- Date:    2017/7/27 0027.
- File:    pay.
-->
<template>
  <div v-show="show">
    <div class="PopBg z99" style="z-index: 999" id="PopBg"></div>
    <div class="MethodPayment BottomGd bg_fff z100 xd " style="z-index: 1000" v-show="paySelectModel">
      <div class="iconfont icon-close tc" @click="closePop"></div>
      <ul>
        <li class="pl20">
          <i class="iconfont icon-money2 fl mr10"></i><span class="lh100 f26 cr_595757 fl">选择支付方式</span>
        </li>
        <li :class="{'on': payType == 0}" @click="switchPayType(0)">
          <div class="LeftIcon fl"><i class="iconfont icon-wechat cr_18aa04"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 微信支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 1}" @click="switchPayType(1)" v-show="false">
          <div class="LeftIcon fl"><i class="iconfont icon-nonghang" style="color: #009883"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 农银快e付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 2}" @click="switchPayType(2)" v-show="false">
          <div class="LeftIcon fl"><i class="iconfont icon-yinlian cr_18aa04"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 银联快捷支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 8}" @click="switchPayType(8)" v-show="false">
          <div class="LeftIcon fl"><i class="iconfont icon-qiandai cr_18aa04"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 通联支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 7}" @click="switchPayType(7)" v-show="false">
          <div class="LeftIcon fl"><i class="iconfont icon-money2 cr_18aa04" style="color: #BE0108"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 快钱支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 6}" @click="switchPayType(6)" v-show="memberInfo.member_id == '5336' || memberInfo.member_id == '5339'">
          <div class="LeftIcon fl"><i class="iconfont icon-erweima cr_18aa04"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 微信扫码支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 3}" @click="switchPayType(3)" v-show="memberInfo.member_id == '5336' || memberInfo.member_id == '5339'">
          <div class="LeftIcon fl"><i class="iconfont icon-erweima cr_18aa04" style="color: #1676cc"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 支付宝扫码支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 5}" @click="switchPayType(5)">
          <div class="LeftIcon fl"><i class="iconfont icon-alipay2 cr_18aa04"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 支付宝支付 </div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
        <li :class="{'on': payType == 4}" @click="switchPayType(4)" v-show="false">
          <div class="LeftIcon fl"><i class="iconfont icon-qiandai cr_f84e37" style="color: #009883"></i></div>
          <div class="fl lh100 f26 cr_595757 ml5"> 经验值支付 (余额：￥{{memberInfo.balance}})</div>
          <div class="select fr lh100 pr20"><i class="iconfont icon-select"></i></div>
        </li>
      </ul>
      <button type="button" class="but_2 wauto bg_45a73a mt10" @click="payClick">立即支付</button>
    </div>
  </div>
</template>

<script>
  import payPwd from '../payPwd'
  import {app} from '../../entry/index'
  //  import {mapModules, mapRules} from 'vuet'

  export default{
//    mixins: [
//      mapModules({memberInfo: 'memberInfo'}),
//      mapRules({once: ['memberInfo']})
//    ],
    data() {
      return {
        deviceType: this.$utils.getDeviceType(),
        show: true,
        paySelectModel: true,
        password: '',
        param: {}, // {paySn: '', orderId: '', amount: '', type: ''} 普通支付：paySn与orderId，红积分充值： paySn与orderId与orderType(orderType: 1或空表示普通订单，2表示红积分订单)，零钱充值：amount和type，type值2
        payType: 2,
        memberInfo: '',
        closedHandle: function () {
        }
      }
    },
    components: {},
    created() {
      this.getMemberInfo()
    },
    watch: {
      // param: function (val) {
      //   if (val.orderType == '4') {
      //     this.payType = 9
      //   } else {
      //     this.payType = 2
      //   }
      // },
      show: function (val) {
        if (val) {
          this.getMemberInfo()
        }
        this.paySelectModel = true
        this.password = ''
      }
    },
    methods: {
      focus() {
        this.$refs.password.focus()
      },
      getMemberInfo() {
        this.$request.getMemberInfo().then(data => {
          this.memberInfo = data
          this.$storage.setMemberInfo(data)
        })
      },
      switchPayType(type) {
        this.payType = type
      },
      switchShowPay(boolValue) {
        this.show = boolValue
      },
      closePop() {
        this.switchShowPay(false)
        this.closedHandle()
      },
      payClick() {
        let url
        let key = this.$storage.getKey()
        if (this.payType == '5' && (this.deviceType == 'wx-Android' || this.deviceType == 'wx-iPhone')) {
          this.$toast('微信不支持支付宝支付，请使用花链会员APP或者浏览器访问系统')
          return
        }
        switch (this.payType) {
          case 0:
            this.$native.weixinPay({paySn: this.param.paySn}).then(data => {
              app.$router.push({name: 'order-success', query: {id: this.param.orderId}})
            }).catch(e => {
              this.$toast('支付失败:' + e.msg)
            })
            break
          case 1:
            this.$native.nonghangPay({paySn: this.param.paySn})
            break
          case 2:
            this.$native.yinlianPay({paySn: this.param.paySn, type: this.param.type, amount: this.param.amount})
            break
          case 7:
//            this.$native.kuaiqianPay({paySn: this.param.paySn, type: this.param.type, amount: this.param.amount})
            if (this.param.amount) { // 充值
              url = this.$config.website + '/mobile/api/payment/kuaiqian/pay.php?payment_code=kuaiqianpay&key=' + key + '&recharge_amount=' + this.param.amount
            } else { // 支付
              url = this.$config.website + '/mobile/api/payment/kuaiqian/pay.php?payment_code=kuaiqianpay&key=' + key + '&pay_sn=' + this.param.paySn
            }
            this.switchShowPay(false)
            app.$router.push({name: 'iframe', query: {url: url}})
            break
          case 8:
            if (this.param.amount) { // 充值
              url = this.$config.website + '/mobile/api/payment/tonglianpay/post.php?payment_code=tonglianpay&key=' + key + '&recharge_amount=' + this.param.amount
            } else { // 支付
              url = this.$config.website + '/mobile/api/payment/tonglianpay/post.php?payment_code=tonglianpay&key=' + key + '&pay_sn=' + this.param.paySn
            }
            this.switchShowPay(false)
            window.location = url
//            app.$router.push({name: 'iframe', query: {url: url}})
            break
          case 3:
            this.$request.getPayQrcode({payment_code: 'AlipayCS', pay_sn: this.param.paySn}).then(data => {
              this.switchShowPay(false)
              app.$router.push({
                name: 'account-qrcodePay',
                query: {type: 'ali', qrcode: data.trade_qrcode, paySn: this.param.paySn, order: this.param.orderId}
              })
            }).catch(e => {
              this.$toast(e.msg)
            })
            break
          case 6:
            this.$request.getPayQrcode({payment_code: 'WeixinBERL', pay_sn: this.param.paySn}).then(data => {
              this.switchShowPay(false)
              app.$router.push({
                name: 'account-qrcodePay',
                query: {type: 'wx', qrcode: data.trade_qrcode, paySn: this.param.paySn, order: this.param.orderId}
              })
            }).catch(e => {
              this.$toast(e.msg)
            })
            break
          case 4:
            this.paySelectModel = false
            payPwd({}, this.payByBalance, null, this.canclePwd)
            break
          case 5:
            this.$native.aliPay({paySn: this.param.paySn, type: this.param.type, amount: this.param.amount})
            break
          case 9:
            this.paySelectModel = false
            payPwd({}, this.payByHongIntegral, null, this.canclePwd)
            break
        }
      },
      canclePwd() {
        this.paySelectModel = true
      },
      payByBalance() {
        this.switchShowPay(false)
        this.$indicator.open('处理中...')
        setTimeout(() => {
          this.$request.payByBalance(this.param.paySn).then(data => {
            app.$router.push({name: 'order-success', query: {id: data.order_id, orderType: this.param.orderType}})
          }).catch(e => {
            console.log('error', e)
            this.$toast('支付失败:' + e.msg)
          }).finally(() => {
            this.$indicator.close()
          })
        }, 1000)
      },
      payByHongIntegral() {
        this.switchShowPay(false)
        this.$indicator.open('处理中...')
        setTimeout(() => {
          this.$request.payByHongIntegral(this.param.paySn).then(data => {
            app.$router.push({name: 'order-success', query: {id: data.order_id, orderType: '4'}})
          }).catch(e => {
            console.log('error', e)
            this.$toast('支付失败:' + e.msg)
          }).finally(() => {
            this.$indicator.close()
          })
        }, 1000)
      }
    }
  }
</script>

<style>
  .pwd-wrap {
    width: 100%;
    height: 40px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
    position: absolute;
    top: 0;
  }

  .pwd-wrap li {
    list-style-type: none;
    text-align: center;
    line-height: 44px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border-right: 1px solid #ddd;
  }

  .pwd-wrap li:last-child {
    border-right: 0;
  }

  .pwd-wrap li i {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #000;
    display: inline-block;
  }
</style>
